<template>
  <a-layout style="height: 100vh">
    <a-layout-sider
      theme="light"
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
    >
      <div class="logo">
        <a-button @click="getHome()" type="text">
          <home-outlined /> 后台管理系统
        </a-button>
      </div>
      <a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        :inline-collapsed="collapsed"
      >
        <!--菜单-->
        <a-menu-item
          @click="MenuClick(item)"
          v-for="item in noChildren()"
          :key="item.path"
        >
          <template #icon>
            <component class="icons" :is="item.icon"></component>
          </template>
          <span>{{ item.label }}</span>
        </a-menu-item>

        <!-- 菜单组 -->
        <a-sub-menu v-for="item in hasChildren()" :key="item.label">
          <template #icon>
            <component class="icons" :is="item.icon"></component>
          </template>
          <template #title>{{ item.label }}</template>

          <!--子菜单-->
          <a-menu-item
            @click="MenuClick(children)"
            v-for="children in item.children"
            :key="children.path"
          >
            <template #icon>
              <component class="icons" :is="children.icon"></component>
            </template>
            <span>{{ children.label }}</span>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <a-avatar class="user" :src="$store.state.user.avatar">user</a-avatar>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Codes ©2023 Created by Wsz
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  UserOutlined,
  HomeOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  InboxOutlined,
  DesktopOutlined,
  LogoutOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { defineComponent, ref } from "vue";
import Home from "@/views/home/Home.vue";
export default defineComponent({
  components: {
    UserOutlined,
    HomeOutlined,
    UploadOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    InboxOutlined,
    LogoutOutlined,
    DesktopOutlined,
    Home,
  },
  setup() {
    const router = useRouter();
    const selectedKeys = ref(["1"]);
    const collapsed = ref(false);
    const list = [
      {
        label: "管理",
        icon: "MenuUnfoldOutlined",
        children: [
          {
            path: "/user",
            name: "user",
            label: "用户管理",
            icon: "UserOutlined",
            url: "user",
          },
          {
            path: "/essays",
            name: "Essays",
            label: "文章",
            icon: "InboxOutlined",
            url: "essays",
          },
        ],
      },
      {
        label: "其他",
        icon: "DesktopOutlined",
        children: [
          {
            path: "/statistics",
            name: "Statistics",
            label: "统计",
            icon: "PieChartOutlined",
            url: "statistics",
          },
          {
            path: "/logout",
            name: "注销",
            label: "注销",
            icon: "LogoutOutlined",
            url: "logout",
          },
        ],
      },
    ];

    const noChildren = () => {
      return list.filter((item) => !item.children);
    };

    const hasChildren = () => {
      return list.filter((item) => item.children);
    };

    const MenuClick = (item) => {
      if (item.name === "注销") {
        localStorage.clear();
        router.push({ name: "login" });
        return;
      }
      router.push({ name: item.name });
    };

    const getHome = () => {
      selectedKeys.value = ["1"];
      router.push({ name: "home" });
    };

    return {
      list,
      selectedKeys,
      collapsed,
      noChildren,
      hasChildren,
      MenuClick,
      getHome,
    };
  },
});
</script>
<style scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 32px;
  margin: 16px;
}

.user {
  position: absolute;
  right: 10px;
  top: 15px;
}
</style>